<template>
  <div>
    <div class="mb-2">{{ editorTitle }}</div>
    <div class="flex items-center gap-2">
      <el-input :placeholder="`请输入${editorTitle}`" v-model="text" />
      <el-button
        circle
        size="small"
        type="primary"
        class="ml-2"
        :icon="Check"
        @click="inputHandle"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import type { Component } from "vue";
import type { IUpdateStatus } from "@/types/common";
import { Check } from "@element-plus/icons-vue";

const props = defineProps<{
  id: string;
  status: string;
  isShow: boolean;
  name: string;
  statusKey: string;
  editCom: Component;
  editorTitle: string;
}>();

const updateStatus = inject("updateStatus") as IUpdateStatus;

// ^ 宽度
const text = ref(props.status);

const inputHandle = () => {
  updateStatus(props.statusKey, text.value);
};
</script>

<style scoped></style>
